import { FC, ReactElement, useState } from 'react'
import { DownOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { Breadcrumb, Dropdown, Menu, Space, message } from 'antd'
import { connect, Dispatch, history } from 'umi'
import { getUrlQuery, getStorage, clearStorage } from '@/utils'
import UpdatePassword from './components/updatePassword'
import styles from './index.less'
interface IProps {
  dispatch: Dispatch
  breadCrumb: string[]
}

const Header: FC<IProps> = ({ dispatch, breadCrumb }): ReactElement => {
  const [visible, setVisible] = useState<boolean>(false)
  const { batchCode, type, questionCode, page } = getUrlQuery() as any
  // 退出登录
  const handleOut = () => {
    dispatch({
      type: 'login/function_logout',
      callback: (response) => {
        if (response.code == 200) {
          message.success('注销成功')
          history.replace('/login')
          clearStorage()
        }
      }
    })
  }
  const menu = (
    <Menu
      items={[
        {
          key: '1',
          label: <span onClick={() => setVisible(true)}>修改密码</span>
        },
        {
          key: '2',
          label: <span onClick={() => handleOut()}>退出登录</span>
        }
      ]}
    />
  )

  const back = () => {
    const { pathname } = history.location
    switch (pathname) {
      case '/evaluation':
        break
      case '/evaluation/upload-detail':
        history.replace({
          pathname: '/evaluation'
        })
        break
      case '/evaluation/point-check':
        history.replace({
          pathname: '/evaluation'
        })
        break
      case '/data-upload':
        break
      case '/data-upload/topic':
        history.replace({
          pathname: '/data-upload',
          query: {
            type: getStorage('type')
          }
        })
        break
      case '/assignment':
        break
      case '/assignment/mark':
        history.replace({
          pathname: '/assignment',
          query: {
            type: getStorage('type')
          }
        })
        break
      case '/evaluation/point-check/office-point':
        history.replace({
          pathname: '/evaluation/point-check',
          query: {
            batchCode,
            type,
            questionCode,
            page
          }
        })
        break
      case '/assignment/mark/special':
        history.replace({
          pathname: '/assignment/mark',
          query: {
            batchCode: getStorage('batchCode'),
            type: getStorage('type')
          }
        })
        break
      case '/evaluation/progress':
        history.replace({
          pathname: '/evaluation'
        })
        break
      case '/evaluation/account':
        history.replace({
          pathname: '/evaluation'
        })
        break
      case '/assignment/mark/check-materials':
        history.replace({
          pathname: '/assignment/mark',
          query: {
            batchCode,
            type: getStorage('type'),
            questionCode,
            page
          }
        })
        break
      case '/arbitration/handle':
        history.replace({
          pathname: '/arbitration/resource',
          query: {
            batchCode: getStorage('batchCode'),
            type: getStorage('type')
          }
        })
        break
      case '/arbitration/resource':
        history.replace({
          pathname: '/arbitration'
        })
        break
      case '/indicator/detail':
        history.replace({
          pathname: '/indicator'
        })
        break
    }
  }

  return (
    <>
      <div className={styles['header-warapper']}>
        <div className={styles['title-wrapper']}>
          <div className={styles['system-title']}>
            新都区中小学“五育”并举育人质量综合评价平台
          </div>
          <div className={styles['right-welcome']}>
            <img
              src={require('@/assets/images/layouts/avatar.png')}
              className={styles['avatar']}
            />
            <Dropdown overlay={menu}>
              <a onClick={(e) => e.preventDefault()}>
                <Space size="middle">
                  {getStorage('userName')}
                  <DownOutlined />
                </Space>
              </a>
            </Dropdown>
          </div>
        </div>
        <div className={styles['breadcrumb']}>
          <Breadcrumb>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            {breadCrumb?.map((item, index) => (
              <Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>
            ))}
          </Breadcrumb>
          <div className={styles.back} onClick={() => back()}>
            <ArrowLeftOutlined />
            <span>返回</span>
          </div>
        </div>

        <UpdatePassword
          visible={visible}
          hide={() => {
            setVisible(false)
          }}
        />
      </div>
    </>
  )
}

const mapStateToProps = () => {
  return {}
}

export default connect(mapStateToProps)(Header)
